<script setup lang="ts">
import { ref } from 'vue'
import { ReloadOutlined } from '@ant-design/icons-vue';
import { GetReviewAssessment } from '@/api/main'
import useUserStore from "@/stores/modules/user";
import ExamineDrawer from '@/components/ExamineDrawer.vue'
const userStore = useUserStore()
const dataSource = ref([])
const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        slots: { customRender: 'index' },
         align:"center"
    },
    {
        title: '考核名称',
        dataIndex: 'khName',
        key: 'khName',
         align:"center"
    },
    {
        title: '部门',
        dataIndex: 'orgName',
        key: 'orgName',
         align:"center"
    },
    {
        title: '姓名',
        dataIndex: 'empname',
        key: 'empName',
         align:"center"
    },
    {
        title: '办理时间',
        dataIndex: 'createtime',
        key: 'createtime',
         align:"center"
    },

    {
        title: '流程状态',
        dataIndex: 'processStatus',
        key: 'processStatus',
        slots: { customRender: 'processStatus' },
         align:"center"
    },    
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        slots: { customRender: 'action' },
         align:"center"
    },
]
const pagination = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

// pageSize 变化的回调
const onShowSizeChange = (current, size) => {
    pagination.value.pageNum = current
    pagination.value.pageSize = size
    getData()
}
const  handleChange = (page,pageSize) =>{
    pagination.value.pageNum = page
    pagination.value.pageSize = pageSize
    getData()
}
const getData = () => {
    GetReviewAssessment({   
        empId: userStore.empid,
        pageNum: pagination.value.pageNum,
        pageSize: pagination.value.pageSize,
        taskStatus:"pass"
    }).then((response: any) => {
        dataSource.value = response.data
        pagination.value.total = response.total
    })
}
getData()
const drawerOptions = ref({
    title: '考核填报',
    width: '80%',
    visible: false,
})
const examineDrawerRefs = ref()
const showDrawer = (record: any, status: number) => {
    drawerOptions.value = {
        title: record.khName,
        width: '1300',
        visible: true,
        record: record,
        assessmentId: record.assessmentempId
    }
    console.log(drawerOptions.value)
    examineDrawerRefs.value.showDrawer(drawerOptions.value, status)
}
</script>

<template>
    <div style="display: flex;align-items: center;justify-content: flex-end;">
        <ReloadOutlined class="operation-btn" @click="getData" />
    </div>
    <br>
    <a-table :dataSource="dataSource" :columns="columns" bordered :pagination="false" rowKey="assessmentempId">
        <template #index="{ index }">
            {{ index + 1 }}
        </template>
        <template #assessmentGrade="{ record }">
            {{ record.assessmentGrade ? record.assessmentGrade : '无' }}
        </template>
        <template #processStatus="{ record }">
            <span>
                <a-tag color="error" v-if="record.processStatus == -1">停用</a-tag>
                <a-tag color="error" v-if="record.processStatus == 0">退回</a-tag>
                <a-tag color="#87d068" v-if="record.processStatus == 1">启用</a-tag>
                <a-tag v-if="record.processStatus == 2">部门领导审核</a-tag>
                <a-tag v-if="record.processStatus == 3">分管领导考核</a-tag>
                <a-tag v-if="record.processStatus == 100">处理完毕</a-tag>
            </span>
        </template>
        <template #action="{ record }">
            <span>
                <a-tag color="#2db7f5" style="cursor: pointer;" @click="showDrawer(record,3)">详情</a-tag>

            </span>
        </template>
    </a-table>
    <br>
    <div style="display: flex;justify-content: flex-end;">
        <a-pagination show-size-changer v-model:current="pagination.pageNum" v-model:pageSize="pagination.pageSize"
            :total="pagination.total" @showSizeChange="onShowSizeChange"  @change="handleChange" />
    </div>
    <ExamineDrawer ref="examineDrawerRefs" @getData="getData" />
</template>

<style scoped>
.table-header {
    display: flex;
    width: 1235px;
    /* align-items: center; */
    /* border-top: 1px solid #f0f0f0; */
    border-left: 1px solid #f0f0f0;
}

.table-header>div {
    border-right: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    /* flex: 1; */
    /* height: 50px; */
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ant-input {
    border: none !important;
}

.ant-input:focus {
    border: none !important;
    box-shadow: none !important;
}

.clear-border {
    align-items: normal;
}

.clear-border div {
    border: 1px solid #d9d9d9;
    min-height: 30px;

}

.table-chidren>div {
    border-bottom: none;
    line-height: 2;
    border-right: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}

.operation-btn {
    border: 1px solid #F2F3F5;
    width: 35px;
    height: 35px;
    display: block;
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 10px;
    font-weight: 700;
}

.operation-btn:hover {
    background: #f2f3f5;
    color: #1677ff;
}
</style>
